<template>
	<view style="padding: 5px 0 5px 0;">
		<!-- 搜索框、头像 -->
		<Header :avatar="avatar"></Header>
		<!-- 滚动标签 -->
		<view class="box" style="margin: 5px; height: 35px;">
			<u-tabs :list="categoryList" lineWidth="30" lineColor="#8A2BE2" :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="selectCategory">
			</u-tabs>
		</view>
		<!-- 作品内容 -->
		<view class="box" style="margin: 5px; padding-top: 1px; padding-bottom: 0;">
			<view class="postList" v-for="item in tableData" :key="item.id">
				<view style="display: flex; margin-top: 10px;">
					<view class="hot" v-if="current === '热榜'"
						style="width: 20px; padding-top: 20px;">
						<text>
							<text style="color: orangered; font-weight: bold; font-size: 22px;"
								v-if="item.index===1">{{ item.index }}</text>
							<text style="color: goldenrod; font-weight: bold; font-size: 18px;"
								v-else-if="item.index===2">{{ item.index }}</text>
							<text style="color: #409EFF; font-weight: bold;"
								v-else-if="item.index===3">{{ item.index }}</text>
							<text style="color: #666; font-weight: bold;" v-else>{{ item.index }}</text>
						</text>
					</view>
					<view class="postList-item" style="flex: 1; width: 0; margin-bottom: 10px">
						<!-- 标题 -->
						<view class="title"
							style="font-size: 18px; font-weight: bold; margin-bottom: 10px; margin-right: 10px;">
							{{item.title}}
						</view>
						<view style="display: flex; align-items: center;">
							<!-- 时间、用户名 -->
							<text style="font-size: 10px; color: #888;">{{item.date}} · {{item.username}}</text>
							<view style="flex: 1; text-align: right; align-items: center;">
								<uni-icons type="pinglun" style="margin-right: 2px;" size="12px"></uni-icons>
								<text style="margin-right: 4px; font-size: 10px; color: #888;">
									{{pinglunText}}
								</text>
							</view>
						</view>
					</view>
					<!-- 封面 -->
					<view class="cover">
						<u--image :src="item.cover" radius="5px" height="75px" width="150px"></u--image>
					</view>
				</view>
				<u-line color="#9b9b9b"></u-line>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from "@/components/Header.vue";
	export default {
		components: {
			Header
		},
		data() {
			return {
				current: '热榜', //当前选中的分类名称
				avatar: '',
				categoryList: [],
				pageNum: 1, // 当前的页码
				pageSize: 20, // 每页显示的个数
				tableData: [],
				total: 0,
				pinglunText: '888',
			}
		},
		onLoad() {
			this.load()
			this.categoryLoad()
			this.loadWorks(1)
			this.refreshTop()
		},
		methods: {
			load() {
				let userStorage = uni.getStorageSync('xm-user')
				this.avatar = userStorage.avatar
				this.username = userStorage.username
			},
			// 加载导航标签
			categoryLoad() {
				this.$request.get('/category/selectAll').then(res => {
					this.categoryList = res.data || []
					this.categoryList.unshift({
						name: '热榜'
					});
				})
			},
			// 加载帖子
			loadWorks(pageNum) {
				if (pageNum) this.pageNum = pageNum
				this.$request.get('/works/selectPage', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					categoryName: this.current,
				}).then(res => {
					this.tableData = res.data?.list
					this.total = res.data?.total
					console.log(this.total);
				})
			},
			selectCategory(key) {
				this.current = key.name
				if (this.current === '热榜') {
					this.refreshTop()
				} else {
					this.loadWorks(1)
				}
			},
			refreshTop() {
				this.$request.get('/works/selectHotWorks').then(res => {
					this.tableData = res.data?.list
					this.total = res.data?.total
					//给tableData的每个元素添加序号
					for (let i = 0; i < this.tableData.length; i++) {
						this.tableData[i].index = i + 1
					}
				})

			}
		}
	}
</script>

<style>
	.title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>